import { Panel, ImgHolder, LayerLink } from 'comps/common';
import { Link } from 'react-router';
import DevTeam from 'comps/dev-team';
import _ from 'lodash';

const UserDevTeams = ({ isFetching, devTeams, style }) => {
  return (
    <Panel style={style} title={`我的开发组 (${devTeams.length})`} spinner={isFetching} headExtra={<Link to='/console/my-dev-teams'>全部</Link>}>
      <ul className='simple-list list'>
        {_.isEmpty(devTeams)
          ? (<li>还没有加入任何开发组哦，赶紧和 leader 联系吧</li>)
          : devTeams.map(({ id, logo, name }) => {
            return (
              <li key={id}>
                <ImgHolder src={logo} alt={name} className='list-img' rect='20x20' random='yes' text={name.substring(0, 1)}/>
                <LayerLink component={DevTeam} data={{ id }} title={`开发组（${name}）详情`}>{name}</LayerLink>
              </li>
            );
          })
        }
      </ul>
    </Panel>
  );
};

export default UserDevTeams;
